<script setup>
import { ref } from "vue";
import { addPremises ,upPremises , editPremises } from '../../../api/build'


const isShow = ref(false)
const fromData = ref({
    name:'',//楼宇名称
    floors:'',//层数
    area:'',//在管面积
    propertyFeePrice:''//物业费单价
    })
const rules = ref({
    name:[
    {required:true,message:'请输入楼宇名称'}
  ],
  floors:[
    {required:true,message:'请输入楼宇层数'}
  ],
  area:[
    {required:true,message:'请输入在管面积'}
  ],
  propertyFeePrice:[
    {required:true,message:'请输入物业费单价'}
  ]
})
const areaRef = ref(null)
const confirm = () => {
  areaRef.value.validate((valid)=>{
    if(valid){
        if(fromData.value.id){
            editList()
          
        }else{
            addData()
        }
    }else{
        cancel()
        console.log('校验失败');
    }
      
    })
}
const emit = defineEmits(['upData' , 'openShow'])
const addData =async () => {
    await addPremises(fromData.value)
    cancel()
}

const cancel = () => {
    delFrom()
    emit('upData')
    emit('openShow')
}
const delFrom = () => {
    areaRef.value.resetFields()
}
//回显数据
const editData =async (ids) => {
    const res = await upPremises(ids)
    const {propertyFeePrice,area,floors,name,id} = res.data
    fromData.value = {propertyFeePrice,area,floors,name,id}

}
//修改数据
const editList = async () => {
    await editPremises(fromData.value)
    console.log(fromData.value);
    cancel()
    fromData.value = {
       name:'',
       floors:'',
       area:'',
       propertyFeePrice:''
    }
}
defineExpose({isShow , editData })
</script>
<template>
    <el-dialog :close-on-click-modal="false" v-model="isShow" title="添加楼宇" width="40%" >
        <el-form label-position="top"  class="diaiog" ref="areaRef" :model="fromData" :rules="rules">
            <el-form-item  label="楼宇名称" style="width: 380px;" prop="name">
                <el-input v-model="fromData.name" placeholder="请输入楼宇名称"></el-input>
            </el-form-item>
            <el-form-item label="楼宇层数" style="width: 380px;" prop="floors">
                <el-input v-model="fromData.floors" placeholder="请输入楼宇层数"></el-input>
            </el-form-item> 
            <el-form-item class="property" label="在管面积" style="width: 380px;" prop="area">
                <el-input v-model="fromData.area" style="width: 340px;" class="input" placeholder="请输入在管面积"></el-input>
                <div class="right" style="width: 40px;">㎡</div>
            </el-form-item>
            <el-form-item class="property" label="物业费" style="width: 380px;" prop="propertyFeePrice">
                <el-input v-model="fromData.propertyFeePrice" class="input"  placeholder="请输入物业费"></el-input>
                <div class="right">元/㎡</div>
            </el-form-item>
        </el-form>
        <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
        </template>
  </el-dialog>
  
</template>
<style scoped>
.diaiog{
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.property{
    position: relative;

}
.property .input{
    z-index: 1;
    width: 320px;
    border-radius: 0 0 10px 10px;
}
.property .input:hover{
    border-color: blueviolet;
}
.right{
    position: absolute;
    right: 0;
    width: 60px;
    height: 30px;
    background-color:#fafafa;
    text-align: center;
    line-height: 30px;
    border: 1px solid #dfe2e8;
}
</style>